<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 1.准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom。用于支持react操作DOM -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
    //创建组件
    class Login extends React.Component {
        handleSubmit = (event) => {
            event.preventDefault(); //阻止表单提交
            //获取节点
            const {username, password} = this;
            alert(`你输入的用户名是:${username.value},你输入的密码是：${password.value}`);
        };

        render() {
            return (
                <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
                    用户名：<input ref={c => this.username = c} type="text" name="username"/>
                    密码：<input ref={c => this.password = c} type="password" name="password"/>
                    <button>登录</button>
                </form>
            );
        }
    }

    //渲染组件
    ReactDOM.render(<Login/>, document.getElementById("test"));
</script>
</body>
</html>